<!--  轮播图页面 -->
<template>
    <div>
        <div class="Carousel">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-picture-outline-round"></i> 轮播图 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="Car_container">
            <div class="Car_container-heared">
                <el-button type="danger" @click="delCarousellist"><i class="el-icon-delete-solid"></i>批量删除</el-button>
                <el-button type="primary" id="adduser" @click="Carouselbtnadd"><span class="add">+</span> 新增</el-button>
            </div>
            <div class="Car_containerTable">
                <template>
                    <el-table class="table" :data="CarouseltableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" align="center"> </el-table-column>
                        <el-table-column prop="date" label="轮播图（查看大图）" align="center" width="200">
                            <template slot-scope="scope">
                                <el-image
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.img_url"
                                    :preview-src-list="CarouselsrcList"
                                ></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="url" label="款式编号" width="900" align="center"> </el-table-column>
                        <el-table-column label="状态" align="center" width="200">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.status"
                                    active-value="1"
                                    inactive-value="2"
                                    active-text="显示中"
                                    inactive-text="不显示"
                                    @change="CarouselChangeSwitch($event, scope.row, scope.$index)"
                                ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="addr" label="操作" align="center" width="200">
                            <template slot-scope="scope">
                                <el-button plain @click="Carouselbtnchange(scope.row)" class="bd_item"
                                    ><i class="el-icon-edit"></i>编辑</el-button
                                >
                                <el-button plain @click="Carouseldel(scope.row)" class="del_item"
                                    ><i class="el-icon-delete"></i>删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 表格分页 -->
                    <div class="block">
                        <el-pagination background :page-size="100" layout="total, prev, pager, next" :total="type_count"> </el-pagination>
                    </div>
                    <!-- 点击新增弹出框 -->
                    <el-dialog title="编辑" :visible.sync="CarouselnewVisible" width="30%" :before-close="addhandleClose">
                        <el-form :model="CarouselNewruleForm" status-icon ref="newruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="状态">
                                <template>
                                    <el-switch
                                        v-model="CarouselNewruleForm.states"
                                        active-value="1"
                                        inactive-value="2"
                                        active-text="显示"
                                        inactive-text="不显示"
                                    ></el-switch>
                                </template>
                            </el-form-item>
                            <el-form-item label="新增图">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://yztapi.medozb.com/api/admin/upload_img"
                                    :show-file-list="false"
                                    :data="{
                                        token: this.token,
                                        file: '',
                                        url: 'slideshow',
                                        is_name: 0
                                    }"
                                    :on-success="CahandleAvatarSuccess"
                                    :before-upload="CabeforeAvatarUpload"
                                >
                                    <img v-if="imgUrls" :src="imgUrls" class="avatar" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="imgUrls" alt="" />
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="款式编号" prop="url">
                                <el-input type="text" placeholder="请输入款式编号" v-model="stylevalue" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="Addcancel('newruleForm')">取 消</el-button>
                            <el-button type="primary" @click="NewbtnAddCarousel">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 点击编辑弹出框 -->
                    <el-dialog title="编辑" :visible.sync="CarouseleditnewVisible" width="30%">
                        <el-form
                            :model="CarouseleditNewruleForm"
                            status-icon
                            ref="editnewruleForm"
                            label-width="100px"
                            class="demo-ruleForm"
                        >
                            <el-form-item label="状态">
                                <template>
                                    <el-switch
                                        v-model="CarouseleditNewruleForm.states"
                                        active-value="1"
                                        inactive-value="2"
                                        active-text="显示"
                                        inactive-text="不显示"
                                    ></el-switch>
                                </template>
                            </el-form-item>
                            <el-form-item label="新增图">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://yztapi.medozb.com/api/admin/upload_img"
                                    :show-file-list="false"
                                    :data="{
                                        token: this.token,
                                        file: '',
                                        url: 'slideshow',
                                        is_name: 0
                                    }"
                                    :on-success="CahandleAvatarSuccess"
                                    :before-upload="CabeforeAvatarUpload"
                                >
                                    <img v-if="imgUrls" :src="imgUrls" class="avatar" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-dialog :visible.sync="editdialogVisible">
                                    <img width="100%" :src="imgUrls" alt="" />
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="款式编号" prop="url">
                                <el-input
                                    type="text"
                                    placeholder="请输入款式编号"
                                    v-model="CarouseleditNewruleForm.stylevalue"
                                    autocomplete="off"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="CarouseleditnewVisible = false">取 消</el-button>
                            <el-button type="primary" @click="NewbtnAddCarousel">确 定</el-button>
                        </span>
                    </el-dialog>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //轮播图列表数据
            CarouseltableData: [],
            //轮播图图片列表
            CarouselsrcList: [],
            status: '',
            Carousellist: [],
            token: '',
            //表单
            CarouselNewruleForm: {
                states: '',
                stylevalue: ''
            },
            //编辑表单
            CarouseleditNewruleForm: {
                states: 0,
                stylevalue: ''
            },
            type_count: 0,
            //新增弹出框
            CarouselnewVisible: false,
            //新增弹出框表单
            NewruleForm: {},
            //图片上传的地址
            imgUrls: '',
            //弹出框
            dialogVisible: false,
            editdialogVisible: false,
            // 编辑弹出框
            CarouseleditnewVisible: false,
            //图片链接
            imgUrls: '',
            //图片
            imgUrl: '',
            edit_img: '',
            //轮播图value
            stylevalue: '',
            //多选
            id_list:'',
        };
    },
    created() {
        this.getkey();
        this.CarouselList();
    },
    mouted() {},
    methods: {
        //获取token
        getkey() {
            this.token = sessionStorage.getItem('token');
        },
        //批量删除
        delCarousellist() {
            this.$confirm('删除品目会同时删除里面的品类，确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/slideshow_delete', {
                                params: {
                                    token: this.token,
                                    id: this.id_list
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.CarouselList();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //新增按钮
        Carouselbtnadd() {
            this.CarouselnewVisible = true;
            this.$axios
                .post('admin/slideshow_add', {
                    params: {
                        token: this.token
                    }
                })
                .then((res) => {});
        },
        //多选按钮val
        handleSelectionChange(val) {
            this.id_list = val.map(function(obj,index){
                return obj.id
            }).join(',');
            console.log(this.id_list)
        },
        //轮播图列表
        CarouselList() {
            this.$axios
                .get('admin/slideshow_list', {
                    params: {
                        token: this.token
                    }
                })
                .then((res) => {
                    this.CarouseltableData = res.data.data.data;
                    this.type_count = res.data.data.data.length;
                    this.CarouselsrcList = this.CarouseltableData.map((e) => {
                        return e.img_url;
                    });
                });
        },
        //switch变化
        CarouselChangeSwitch(e, row, index) {
            this.$axios.post('admin/slideshow_update', {
                token: this.token,
                id: row.id,
                img: row.img,
                url: row.url,
                status: row.status
            });
        },
        //编辑事件
        Carouselbtnchange(row) {
            // console.log(row)
            this.CarouseleditnewVisible = true;
            this.CarouseleditNewruleForm.states = row.status;
            this.CarouseleditNewruleForm.stylevalue = row.url;
            this.imgUrls = row.img_url;
            this.edit_img = row.img;
        },
        //删除事件
        Carouseldel(row) {
            // console.log(row);
            this.$confirm('删除品目会同时删除里面的品类，确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/slideshow_delete', {
                                params: {
                                    token: this.token,
                                    id: row.id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.CarouselList();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //图片上传成功回调
        CahandleAvatarSuccess(res, flie) {
            // console.log(res, flie);
            this.imgUrls = res.data.imgs;
            this.imgUrl = res.data.img;
        },
        //图片上传之前的回调
        CabeforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('图片格式不正确！(只能包含jpg，png,webp,JPEG)');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //新增确定按钮
        NewbtnAddCarousel() {
            this.CarouselnewVisible = false;
            // console.log(this.stylevalue)
            // console.log('我在这',this.CarouselNewruleForm.states)
            this.$axios
                .post('admin/slideshow_add', {
                    token: this.token,
                    img: this.imgUrl,
                    url: this.stylevalue,
                    status: this.CarouselNewruleForm.states
                })
                .then((res) => {
                    console.log(res.status);
                    if (res.status !== 200) {
                        this.stylevalue = res.data.data.url;
                    }
                    this.$message.success('添加完成');
                    this.CarouselList();
                    this.CarouselNewruleForm.states = 2;
                    this.CarouselNewruleForm.stylevalue = '';
                    this.stylevalue = '';
                    this.imgUrls = '';
                })
                .catch(() => {
                    this.$message('添加失败');
                });
        },
        //新增取消
        Addcancel(newruleForm) {
            this.CarouselnewVisible = false;
            this.$nextTick(() => {
                this.$refs[newruleForm].resetFields(); // this.$refs.form.resetFields();
            });
            this.CarouselNewruleForm.states = 2;
            this.CarouselNewruleForm.stylevalue = '';
            this.imgUrls = '';
        },
        //右上角X取消
        addhandleClose() {
            this.CarouselnewVisible = false;
            this.CarouselNewruleForm.states = 2;
            this.CarouselNewruleForm.stylevalue = '';
            this.imgUrls = '';
        }
    }
};
</script>
<style scoped>
.Carousel {
    margin-top: 10px;
}
.Car_container {
    margin-top: 10px;
    background-color: white;
}
.Car_container-heared {
    display: flex;
    justify-content: space-between;
    padding: 30px;
}
.table {
    padding: 30px;
}
.bd_item {
    /* background-color: white; */
    border: 0px;
    color: rgb(64, 158, 255);
}
.del_item {
    border: 0px;
    color: red;
}
/deep/.el-upload--text {
    width: 180px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>